<template>
    <div>
        <div v-if="articles == ''">
            <div v-for="i in 3" :key="i">
                <el-skeleton style="--el-skeleton-circle-size: 120px">
                </el-skeleton>
            </div>
        </div>
        <div v-for="i in articles" :key="i.id" class="title">
            <router-link :to="{ name: 'article', query: { id: i.id } }" class="article">
                {{ i.title }}</router-link>
            <el-divider border-style="dashed" />
        </div>
    </div>
</template>

<script>
export default {
    name: "articleHomeShowComponents",
    props: {
        articles: {
            type: String,
            default: "ASDASD",
        }
    },
    setup() {
        
    }
}

</script>

<style scoped>
.title {
    width: 400px;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article {
    text-decoration: none;
    color: black;
}

.article:visited {
    text-decoration: none;
    color: black;
}

.article:hover {
    text-decoration: none;
    color: red;
}



.el-divider--horizontal {
    margin: 15px 0;
}
</style>